<template>
  <div class="article-list">
    <div class="main-content">
      <el-row type="flex" justify="center">
        <el-col :span="20">
          <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
              <div class="header-sec">
                <h4 style="color:red;margin-bottom:0px;">
                  {{ article_type_name }}
                </h4>
              </div>
            </div>
            <div
              class="l-img-r-text-box"
              v-for="(o, index) in dataList"
              :key="o.id"
            >
              <img class="left-img" :src="get_image_url(o.cover)" />
              <div class="content-box">
                <h5 class="content-title" @click="handleReadAll(o.id)">
                  {{ o.title }}
                </h5>
                <div class="content-desc">
                  {{ o.remark }}
                </div>
                <el-link
                  type="danger"
                  class="read-all-btn"
                  @click.native="handleReadAll(o.id)"
                  >阅读全文</el-link
                >
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-pagination
        background
        class="pagination-box"
        layout="prev, pager, next"
        :current-page.sync="queryInfo.page"
        :page-size.sync="queryInfo.pageSize"
        @current-change="getArticleList"
        :total="total"
      >
      </el-pagination>
    </div>
    <Footer />
  </div>
</template>

<script>
import Footer from "../../../components/Footer/Footer";
import axios from "axios";
const BASE_URL = "http://127.0.0.1:8886";
export default {
  name: "ArticleList",
  data() {
    return {
      article_type_name: "",
      queryInfo: {
        page: 1,
        pageSize: 10,
        articleTypeId: "",
        flag: 1
      },
      total: 0,
      dataList: []
    };
  },
  created() {},
  activated() {
    this.article_type_name = this.$route.query.name;
    this.queryInfo.articleTypeId = this.$route.query.type_id;
    this.getArticleList();
  },
  methods: {
    handleReadAll(id) {
      this.$router.push({
        path: `/article-detail/${id}`
      });
    },
    get_image_url(id) {
      return BASE_URL + "/images/small/" + id + ".jpg";
    },
    handlePageChange() {
      console.log(this.queryInfo);
    },
    getArticleList() {
      axios({
        method: "GET",
        url: BASE_URL + "/article/getArticleByPage",
        params: this.queryInfo,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }).then(re => {
        const { data: result } = re;
        this.dataList = result.data;
        this.total = result.total;
      });
    }
  },
  components: {
    Footer
  }
};
</script>

<style scoped>
.article-list {
  padding-top: 30px;
  background-color: rgb(240, 240, 240);
  background: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4106541136,332060335&fm=26&gp=0.jpg")
    no-repeat;
  background-position: 0 -20px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main-content {
  flex: 1;
}
.l-img-r-text-box {
  display: flex;
}
.l-img-r-text-box:not(:last-child) {
  padding-bottom: 20px;
  margin-bottom: 40px;
  border-bottom: 1px solid rgb(241, 241, 241);
}

.left-img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 2px;
}
.content-box {
  margin-left: 20px;
  flex: 1;
}
.content-title {
  cursor: pointer;
}
.content-title:hover {
  color: red;
  text-decoration: underline;
}
.content-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  position: relative;
  margin-right: 30px;
  font-size: 14px;
  color: rgb(153, 153, 153);
}
.read-all-btn {
  color: red !important;
  float: right;
  margin-top: 20px;
  display: block;
}
.header-sec {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pagination-box {
  text-align: center;
  margin: 30px 0 100px;
}
.pagination-box >>> button {
  background-color: #fff !important;
}
.pagination-box >>> .number {
  background-color: #fff !important;
}
.pagination-box >>> .number:hover {
  background-color: red !important;
  color: #fff !important;
}
.pagination-box >>> .active {
  background-color: red !important;
}
</style>
